<template>
    <div class="question">
        <van-cell title="当前位置" is-link @click="showPopup" />
        <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
            <van-area v-model="value" title="标题" :area-list="areaList" @confirm="sure" @cancel="cance" />
        </van-popup>
    </div>
    <div class="nav">
        <van-grid :border="false" :column-num="5">
            <van-grid-item v-for="item in nav" :key="item.id" :to="item.url">
                <van-image :src="item.img" style="width: 80%;" />
                {{ item.name }}
            </van-grid-item>
        </van-grid>
    </div>
    <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
    </div>
    <van-button @click="userMessage">用户</van-button>
    <van-button @click="driverMessage">司机</van-button>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import http from '../../http';
import { areaList } from '@vant/area-data';
const router = useRouter()

const value = ref('330302');
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const sure = () => {
    alert("确定"+value.value);
    show.value = false;
};
const cance = () => {
    alert("取消");
    show.value = false;
};
let nav = ref({})
const getNav = () => {
    http.get('/navigation/navigation/').then(res => {
        nav.value = res.data.data
        console.log(res.data.data)
    })
}

const userMessage = () => {
    router.push('/userMessage')
}
const driverMessage = () => {
    router.push('/driverMessage')
}

onMounted(() => {
    getNav()
})

</script>

<style scoped></style>